<template>

	<view class="user_edit wap">

		<view class="group group_hd">
			<view class="lab"></view>
			<view class="inp_box">
				<image class="image_user" :src="user.UserImgs" mode="aspectFill" />
			</view>
		</view>
		<view class="group">
			<view class="lab">昵称</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.Name" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">微信号</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.WechatNo" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">电话</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.Phone" placeholder="暂无电话" disabled @click.stop="callNumber()" />
				<view class="icon_box" v-if="user.Phone" @click.stop="callNumber()"><uni-icons type="phone-filled" size="18"
						color="#E7E7E7"></uni-icons></view>
				<view class="icon_box" v-if="user.Phone" @click.stop="copyNumber()"><uni-icons type="paperclip" size="18" color="#E7E7E7"></uni-icons></view>
			</view>
		</view>
		<view class="group">
			<view class="lab">首次访问时间</view>
			<view class="inp_box">
				<input type="text" v-model="user.CreateTime" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">注册时间</view>
			<view class="inp_box">
				<input type="text" v-model="user.RegisterTime" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">注册平台</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.UserFrom" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">来源</view>
			<view class="inp_box">
				<input type="nickname" v-model="user.AdChannel" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">最近在线</view>
			<view class="inp_box">
				<input type="text" v-model="user.UpdateTime" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">会员期限</view>
			<view class="inp_box">
				<text>{{ singleTimeString(user.Start_Date) }} 至 {{ singleTimeString(user.End_Date) }}</text>
			</view>
		</view>
		<view class="group">
			<view class="lab">挥豆数量</view>
			<view class="inp_box">
				<input type="text" v-model="user.Score" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">推荐人</view>
			<view class="inp_box" @click="nav_to(`/pages/user/user_visitor?id=${user.P_ID}`)">
				<input type="text" v-model="user.P_Name" disabled />
			</view>
			<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
		</view>
		<view class="group">
			<view class="lab">总点击量</view>
			<view class="inp_box">
				<input type="text" v-model="user.ClickNum" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">总曝光量</view>
			<view class="inp_box">
				<input type="number" v-model="user.ViewNum" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">总点击率</view>
			<view class="inp_box">
				<input type="number" v-model="user.ExposureRate" disabled />
			</view>
		</view>
		<view class="group">
			<view class="lab">推荐用户数</view>
			<view class="inp_box" @click="nav_to(`/pages/manage/recommend_users?pid=${ID}`)">
				<text>{{ user.RecommendRegisterUsers_Num }} / {{ user.RecommendUsers_Num }}</text>
			</view>
			<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
		</view>
		<view class="btn m40" @click="$refs['member'].open()">开通会员</view>
		<view class="btn m40" @click="$refs['payhui'].open()">充值挥豆</view>
		<view class="btn m40" v-if="user.IsRecommend == 0" @click="recommend_sub(1)">推 荐</view>
		<view class="btn m40" v-if="user.IsRecommend >= 1" @click="recommend_sub(-1)">取消推荐</view>
		<view class="btn m40" @click="unview">首页不显示</view>
		<view class="btn m40" @click="enabled">账号禁用</view>
		<block v-if="is_my_user">
			<view class="btn m40" @click="$refs['setting'].open()">设置代理佣金</view>
			<view class="m40">拉新：{{ com.NewUser_Commission }} 消费分成：{{ com.F_Commission_Rate }}%
				收礼分成：{{ com.T_Commission_Rate }}% </view>

		</block>
		<!-- 开通会员弹出层 -->
		<uni-popup ref="member" type="center">
			<view class="pop_con">
				<view class="hd f1">开通会员</view>

				<view class="inp">
					<view class="name">
						会员等级:
					</view>
					<view class="gradeList">
						<view class="grade" v-for="(gradeone, index) in gradeList" :key="index"
							@click="getGrade(gradeone)" :class="{ 'cycle': gradeone == grade }">
							{{ gradeone }}
						</view>
					</view>
				</view>
				<view class="inp">
					<view class="name">
						会员周期:
					</view>
					<view class="gradeList">
						<view class="grade" v-for="(cycleone, index) in cycleList" :key="index"
							@click="getCycle(cycleone)" :class="{ 'cycle': cycleone == cycle }">
							{{ cycleone }}
						</view>
					</view>
				</view>
				<view class="btns">
					<u-button text="取消" @click="$refs['member'].close()"></u-button>
					<u-button type="success" text="确定" @click="recharge"></u-button>
				</view>
				<view class="des">提示：如果该用户已是会员，时间则会累加</view>
			</view>
		</uni-popup>

		<uni-popup ref="setting" type="center">
			<view class="pop_con">
				<view class="hd f1">设置佣金</view>
				<view class="inp">
					<view class="name">
						拉新佣金(元)
					</view>
					<view class="gradeList">
						<input v-model="NewU_Com" type="number" placeholder="请输入">
					</view>

				</view>
				<view class="inp">
					<view class="name">
						消费分成(%，最大15%)
					</view>
					<view class="gradeList">
						<input v-model="Com_Rate" type="number" max="15" placeholder="最大值为15">
					</view>
				</view>
				<view class="inp">
					<view class="name">
						收礼分成(%，最大10%)
					</view>
					<view class="gradeList">
						<input v-model="gift_Com_Rate" type="number" max="10" placeholder="最大值为10">
					</view>
				</view>
				<view class="btns">
					<u-button text="取消" @click="$refs['setting'].close()"></u-button>
					<u-button type="success" text="确定" @click="setting_sub"></u-button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="payhui" type="center">
			<view class="moneybox">
                <view class="moneytext">请输入充值的金额</view>
                <view class="moneycontent">
                     <input type="text" placeholder="请输入金额" v-model="Money" />
                </view>
               
                <view class="summoneybox">
                    <!-- <view class="summoney">{{'当前总佣金为：'}}<text class="sumconmm">{{(userinfo.Commission?userinfo.Commission:'0')}}</text></view>
                    <view class="allbtn" @click="Money = userinfo.Commission">提现全部</view> -->
                </view>
                <view class="confimbtn" @click="RechargeScore">确认充值</view>
                <!-- <view class="Tiptext">注：提现金额不能小于10</view> -->
            </view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {},
	data() {

		return {
			Money:'',
			user: {},
			gradeList: ['金卡会员', '黑金卡会员'],
			cycleList: ['体验', '一个月', '三个月', '一年'],
			grade: '金卡会员',
			cycle: '体验',
			ID: 0,
			MSort: 99999,

			is_my_user: false,
			Com_Rate: 0,
			gift_Com_Rate: 0,
			NewU_Com: 0,

			com: {}
		};
	},
	methods: {
		//充值挥豆
		async RechargeScore(){
			if(!Number(this.Money)){
				this.$pv.msg('请输入正确的数字');
				return;
			}
			if(Number(this.Money) < 1){
				this.$pv.msg('充值数量不能小于1');
				return;
			}
			let _this = this
			uni.showModal({
				title: '温馨提示',
				content: '确认为他充值吗',
				confirmText: "确定",
				success: async function (res) {
					if (res.confirm) {
						let res1 = await _this.$api.post('Member/RechargeScore',{
							UserID:_this.ID,
							Money:_this.Money
						})
						if(res1.code == 0){
							_this.GetUserData()
							_this.$refs['payhui'].close()
							_this.Money = ''
							_this.$pv.msg('充值成功');
						}else{
							_this.$pv.msg(res1.message);
						}
					} else if (res.cancel) {
						
					}
				}
			});
		},
		callNumber() {
			if (this.user.Phone) {
				uni.makePhoneCall({
					phoneNumber: this.user.Phone,
					// phoneNumber: '15572847621',
					success: () => {
					},
					fail: () => {
						console.error('拨打电话失败！');
					},
				});
			}

		},
		copyNumber(){
			const that = this
			if (this.user.Phone) {
				uni.setClipboardData({
					data: this.user.Phone,
					success: function () {
						that.$pv.msg('复制成功')
					},
					fail: function () {
						that.$pv.msg('复制失败')
					}
				})
			}
		},
		singleTimeString(value) {
			var d = Date.parse(value);
			return this.$u.date(d, 'yyyy-mm-dd');
		},
		async setting_sub() {

			let res = await this.$api.post("SaleChannel/SetCommissionInfo", {
				UserID: this.ID,
				NewUser_Commission: this.NewU_Com,
				F_Commission_Rate: this.Com_Rate,
				T_Commission_Rate: this.gift_Com_Rate
			});


			this.$refs['setting'].close();


		},

		getGrade(item) {
			this.grade = item
		},
		getCycle(cycle) {
			this.cycle = cycle
		},
		async recommend_sub(n) {

			let res = await this.$api.post('/Member/SetRecommend', {
				ID: parseInt(this.ID),
				Sort: parseInt(n)
			});

			this.$pv.msg('设置成功');

			let res1 = await this.$api.post('Manage/GetUserData', {
				ID: parseInt(this.ID)
			});
			this.user = res1.data;
			
		},
		async recharge() {
			const that = this
			uni.showModal({
				title: '温馨提示',
				content: '确认为他开通会员吗',
				confirmText: "确认开通",
				success: async function (res) {
					if (res.confirm) {
						let res = await that.$api.post('/Member/UpgradeUser', {
							ID: that.ID,
							UserType: that.grade,
							UpgradeRemark: that.cycle
						});

						that.$pv.msg('开通成功')

						that.$refs.member.close();

						let res1 = await that.$api.post('Manage/GetUserData', {
							ID: parseInt(that.ID)
						});
						that.user = res1.data;
					} else if (res.cancel) {

					}
				}
			});
		},
		getout() {
			this.nav_to(
				`/pages/album/operation?id=${this.ID}`
			)
		},
		async enabled() {

			this.$pv.load('正在处理');


			let res = await this.$api.post('User/Enabled', {
				ID: this.ID
			});
			this.$pv.closeLoad();

			this.$pv.msg('已经禁用');

		},
		async unview() {

			this.$pv.load('正在处理');


			let res = await this.$api.post('User/UnView', {
				ID: this.ID
			});
			this.$pv.closeLoad();

			this.$pv.msg('已取消显示');

		},

		async GetUserData(){
			let res = await this.$api.post('Manage/GetUserData', {
				ID: this.ID
			});

			this.user = res.data;
			this.MSort = res.data.Sort;
			//如果这个用户是我的下属用户，即该用户的PID==自己的ID
			if (res.data.P_ID == uni.getStorageSync('user').ID) {

				this.is_my_user = true;

				let c_data = await this.$api.post('/SaleChannel/Detail', {
					UserID: this.ID
				});
				this.com = c_data.data;
			} else
				this.is_my_user = false;
		}
	},
	async onLoad(e) {
		this.ID = e.id

		let d = await this.$api.post('Company/IsCompanyAdmin');
		if (!d.data)
			this.nav_back(1500);
		this.GetUserData()
			
			
			

	},
	onUnload() {

	}
};
</script>

<style lang="scss">
.user_edit {
	padding-bottom: 100rpx;
}

.tip {
	margin-top: 32rpx;
	height: 70rpx;
	background: rgba(254, 240, 188, 0.2);
	border-radius: 4rpx;
	color: #fef0bc;
	line-height: 70rpx;
	text-align: center;
}

.user_header_btn {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	border-radius: 0;
}

.user_header,
.cover_btn {
	border-radius: 10rpx;
	overflow: hidden;
	height: 100rpx;
	width: 100rpx;
	background: rgba(255, 255, 255, 0.1);
	margin-left: 0;
	display: flex;
	// text-align: center;
	justify-content: center;
	align-items: center;

	.iamge_icon {
		height: 60rpx;
		width: 60rpx;
	}

	.image_user {
		height: 100%;
		width: 100%;
	}
}

.lab {
	height: 90rpx;
	padding-right: 10rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 90rpx;

	.msg {
		display: inline-block;
		padding-left: 10rpx;
		font-size: 28rpx;
		color: #dd3232;
	}
}

.group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;

	&::after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 2rpx;
		content: '';
		transform: scaleY(.6);
		background-color: #404040;
	}

	.inp_box {
		flex: 1;
		display: flex;
		align-items: center;

		input {
			width: 100%;
			text-align: right;
		}

		text {
			width: 100%;
			text-align: right;
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}

	.inp_append {
		margin-left: 8rpx;
	}


}

.group_hd {
	height: auto;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
}

.m40 {
	margin-top: 50rpx;
}

.group_textarea {
	flex: 1;
	height: 200rpx;
	padding-top: 12rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;

	/deep/ .u-textarea {
		background: none !important;
		// border-bottom: none !important;
		border-color: rgba(64, 64, 64, 1) !important;
		padding-left: 20rpx;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #fff !important;
	}

	/deep/ .u-textarea__field {
		color: #fff !important;
	}
}



.inp_box_r {
	display: flex;
	justify-content: flex-end;
}

.text_r {
	text-align: right;
}

.group_warp {
	padding-bottom: 20rpx;
	display: block;
	height: auto;
}



.pop_con {
	//height: 680rpx;
	background: #fff;
	width: 650rpx;
	border-radius: 16rpx;
	border: 1px solid #FEF0BC;

	.hd {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #eee;
		text-align: center;
		line-height: 90rpx;
		color: #333;
		font-weight: bolder;
	}

	.des {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		color: #be660e;
	}

	.inp {
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;

		.name {
			color: #000;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 10rpx;
		}

		.gradeList {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.grade {
				box-sizing: border-box;
				height: 60rpx;
				width: 160rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 10rpx;
				font-size: 14px;
				color: #333;
				border: 1px solid #FEF0BC;
				margin-left: 12rpx;
			}

			.cycle {
				background-color: #333;
				color: #fff;
			}

			input {
				color: #7c7c7c;
			}
		}

	}

	.btns {
		margin-top: 40rpx;
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
		justify-content: space-between;

		/deep/ .u-button__text {
			color: #333;
		}

		/deep/ .u-button--success {
			text {
				color: #fff !important;
			}

			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
		}

		/deep/ .u-button {
			width: 290rpx;
		}
	}
}
.moneybox{
    width: 550rpx;
    height: fit-content;
    padding: 32rpx 0;
    background-color: #fff;
    border-radius: 32rpx;
    .summoneybox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 30rpx;

      .summoney{
            font-size: 24rpx;
            color: #999999;
            .sumconmm{
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
            }
        }
        .allbtn{
            width: 120rpx;
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
            border-radius: 30rpx;
            font-size: 20rpx;
            color: #fff;
            background-color: #706EEE;
        }  
    }
    
    .moneytext{ 
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        text-align: center;
    }
    .moneycontent{
        border: 2rpx solid #E4E4E4;
        width: 70%;
        height: 80rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        padding: 20rpx 0;
        line-height: 1;
        >input{
            font: inherit;
            display: block;
            min-height: 0 !important;
            // height: 100%;
        }
    }
    .confimbtn{
            width: 182rpx;
            min-width: 182rpx;
            height: 64rpx;
            background: #706EEE;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: #fff;
            font-size: 28rpx;
            margin: 40rpx auto;
    }
    .Tiptext{
        font-size: 24rpx;
        color: #FC4F45;
        text-align: center;
    }
}
</style>